<template>
  <div>
    <h1>App:{{ person }}</h1>
    <button @click="changeA">show</button>
    <hr />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>


<script  setup lang="ts">
import { ref } from "vue";

interface personType {
  id?: number;
  name: string;
  age: number;
  sex: string;
  girFri: {
    name: string;
    age: number;
  };
}

const person = ref<personType>({
  name: "翠花",
  age: 18,
  sex: "男",
  girFri: {
    name: "lucy",
    age: 19,
  },
});

const changeA = () => {
  person.value.age++;
  person.value.girFri.age++;
};
</script>


<style  scoped >
</style> 